<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/student/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>制作案例环境</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title">
                <img src="./../../assets/images/title_icon5.png" />制作案例环境
            </div>
            <div class="surroundings-box">
                <div class="surroundings-left">
                    <ul>
                        <li>
                            <div class="left-title">1.案例环境介绍：</div>
                            <div class="left-content">
                                <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入内容"
                                    v-model="textarea">
                                </el-input>
                            </div>
                        </li>
                        <li>
                            <div class="left-title">2.检查案例进程：</div>
                            <div class="left-content">
                                <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入内容"
                                    v-model="textarea2">
                                </el-input>
                            </div>
                        </li>
                        <li>
                            <div class="left-title">
                                3.案例数据介绍：
                                <em>(注：按照数据种类区分的简单说明）</em>
                                <div class="add-btn" @click="addDomain">+</div>
                            </div>
                            <div class="left-content">
                                <div class="textarea-item"
                                    v-for="(domain, index) in domains">
                                    <el-input
                                        type="textarea"
                                        :rows="3"
                                        placeholder="请输入内容"
                                        v-model="domain.value">
                                    </el-input>
                                    <div class="delete-btn" @click.prevent="removeDomain(domain)">-</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="surroundings-btn-box">
                        <el-button type="primary" style="margin:0 auto; display: block;" @click="saveFn">保存</el-button>
                    </div>
                </div>
                <div class="surroundings-right">
                    <div class="right-title">实验平台</div>
                    <div class="right-surroundings-code">
                        <iframe :src="ip" width="100%" :height="iframeHeight" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                projectId: '',
                textarea: '',
                textarea2: '',
                domains: [{
                    value: ''
                }],
                iframeHeight: '',
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.init()
            this.ip = '/dataplatform/image/desktop?experimentId=1'
            this.$nextTick(function () {
                this.iframeHeight = $('body').height()
            })
        },
        methods: {
            init(){
                let self = this

                self.$http.get('/dataplatform/environment/detail?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.textarea = res.data.introduction
                        self.textarea2 = res.data.process
                        if(res.data.dataIntroduction.length > 0){
                            self.domains = []
                        }
                        for (let i = 0; i < res.data.dataIntroduction.length; i++) {
                            let dataJson = {}
                            dataJson.value = res.data.dataIntroduction[i]
                            self.domains.push(dataJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else if(res.code == '404'){
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //删除
            removeDomain(item) {
                var index = this.domains.indexOf(item)
                if (index !== -1) {
                this.domains.splice(index, 1)
                }
            },
            //添加
            addDomain() {
                 this.domains.push({
                    value: ''
                })
            },
            //保存
            saveFn(){
                let self = this
                let dataIntroductionArr = []
                for (let i = 0; i < self.domains.length; i++) {
                    dataIntroductionArr.push(self.domains[i].value)
                }
                self.$http.post('/dataplatform/environment/update',{
                    itemId: self.projectId,
                    introduction: self.textarea,
                    process: self.textarea2,
                    dataIntroduction: dataIntroductionArr
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        self.init()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
